<template>
  <footer>
    <div class="container">
      <div class="footer-content">
        <footer-section title="关于福州印象">
          <p>福州，一座被绿水青山温柔拥抱的千年古城，这里有着"有福之州"的美誉，更有着让人流连忘返的独特魅力。

            漫步在三坊七巷的青石板路上，明清时期的古建筑静静诉说着往昔繁华；鼓山之上，登高远眺，整座城市美景尽收眼底；
            闽江之畔，现代霓虹与古老街巷交相辉映，演绎着传统与现代的完美融合。

            这里的美食更是让人回味无穷：一碗鲜香弹牙的福州鱼丸，一盅醇厚滋补的佛跳墙，还有那街头巷尾飘香的锅边糊，无不令人食指大动。

            有福之州，有福同享——福州正以最美的姿态，期待您的到来，在这里书写属于您的独特记忆。</p>
        </footer-section>



        <footer-section class="footer-right" title="联系我们">
          <p><i class="fas fa-map-marker-alt"></i> 福建省福州市仓山区上下店路</p>
          <p><i class="fas fa-phone"></i> 0591-1234567</p>
          <p><i class="fas fa-envelope"></i> contact@fz-nostalgia.com</p>
          <div class="social-icons">
            <a href="#"><i class="fab fa-weixin"></i></a>
            <a href="#"><i class="fab fa-weibo"></i></a>
            <a href="#"><i class="fab fa-qq"></i></a>
          </div>
        </footer-section>
      </div>
      <div class="footer-bottom">
        <p>&copy; 2023 福州印象 fz-nostalgia. 保留所有权利。</p>
      </div>
    </div>
  </footer>
</template>

<script>
import FooterSection from './FooterSection.vue'

export default {
  name: 'AppFooter',
  components: {
    FooterSection
  }
}
</script>

<style scoped>
footer {
  background: var(--dark-color);
  color: white;
  padding: 40px 0 20px;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-bottom: 30px;
}

.footer-bottom {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-right {
  text-align: center;
}
.social-icons {
  
  gap: 15px;
  margin-top: 15px;
}

.social-icons a {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  transition: background 0.3s;
}

.social-icons a:hover {
  background: var(--primary-color);
}
</style>